<template>
  <a-modal class="common-modal" :title="title" :footer="null" :width="550" :visible="visible" @cancel="handleCancel" :maskClosable="false" style="top:5%;">
    <a-spin :spinning="confirmLoading">
      <a-form ref="formRef" :model="formState" layout="vertical"  :rules="modalRules" class="p-20 pb-2" :label-col="{ span: 23 }" :wrapper-col="{ span: 23 }">
        <a-form-item :label="$t('basicData.jobNo')" name="staffNo">
          <a-input v-model:value.trim="formState.staffNo" :placeholder="$t('common.pleaseInput')" />
        </a-form-item>
        <a-form-item :label="$t('basicData.name')" name="nickName">
          <a-input v-model:value.trim="formState.nickName" :placeholder="$t('common.pleaseInput')" />
        </a-form-item>
        <a-form-item :label="$t('basicData.cardNo')" name="cardNo">
          <a-input v-model:value.trim="formState.cardNo" :placeholder="$t('common.pleaseInput')" />
        </a-form-item>
        <a-form-item :label="$t('basicData.group')" name="groupId" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select v-model:value="formState.groupId" allowClear :placeholder="$t('common.pleaseSelect')">
            <a-select-option v-for="(item, index) in emplGruopList" :key="index" :value="item.id">
              {{item.name}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('basicData.skillLv')" name="bridgeType" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select v-model:value="formState.skillId" allowClear :placeholder="$t('common.pleaseSelect')">
            <a-select-option v-for="(item, index) in skillGradeList" :key="index" :value="item.id">
              {{item.grade}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('basicData.workType')" name="bridgeType" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select v-model:value="formState.professionIdList" mode="multiple" allowClear :placeholder="$t('common.pleaseSelect')">
            <a-select-option v-for="(item, index) in workTypeList" :key="index" :value="item.id">
              {{item.name}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <!-- <a-form-item label="$t('basicData.machineType')" name="oldPassword">
          <a-input v-model:value.trim="formState.oldPassword" disabled placeholder="$t('common.pleaseInput')"  />
        </a-form-item> -->
      </a-form>
      <div class="common-modal-footer">
        <a-button @click="handleCancel" class="cancel">{{$t('common.cancel')}}</a-button>
        <a-button @click="handleOk" type="primary" class="confirm">{{$t('common.ok')}}</a-button>
      </div>
    </a-spin>
  </a-modal>
</template>

<script setup name="operateEmpModal">
import { ref, nextTick, onMounted, computed } from 'vue'
import { store } from '@/store'
import { cloneDeep } from 'lodash'
import axios from '@/utils/request'
import { message } from 'ant-design-vue'
import { modalRules } from './employeesConfig'
import i18n from '@/locales/index' 
const { t } = i18n.global
const emits = defineEmits(['ok'])
let visible = ref(false)
let confirmLoading = ref(false)
let formState = ref({})
const formRef = ref()
const title = ref('')
const labelCol = {
  xs: { span: 24 },
  sm: { span: 6 },
}
const wrapperCol = {
  xs: { span: 24 },
  sm: { span: 16 },
}
let recordInfo = ref({})
let isAddOpt = ref(false)
const emplGruopList = computed(() => {
  return store.state.normalData.emplGruopList
})
const workTypeList = computed(() => {
  return store.state.normalData.workTypeList
})
const skillGradeList = computed(() => {
  return store.state.normalData.skillGradeList
})
const edit = async (record, isAdd) => {
  isAddOpt.value = isAdd
  title.value = `${isAdd ? t('common.addNew') : t('common.editor')} ${t('basicData.staff')}`
  visible.value = true
  recordInfo.value = Object.assign({}, record)
  recordInfo.value.professionIdList = recordInfo.value.professionIdList || []
  await nextTick()
  formState.value = recordInfo.value
  formRef.value.resetFields()
}
const handleOk = async () => {
  try {
    await formRef.value.validateFields()
    let params = cloneDeep(formState.value)
    confirmLoading.value = true
    let url = isAddOpt.value ? '/api/basic/staff/add' : '/api/basic/staff/edit'
    if (!isAddOpt.value) params.id = recordInfo.value.id
    let res = await axios.postAction(url, params)
    confirmLoading.value = false
    if (res.success) {
      message.success(res.msg)
      emits('ok')
      handleCancel()
    } else {
      confirmLoading.value = false
    }
  } catch {
    confirmLoading.value = false
    console.log('error')
  }
}
const handleCancel = () => {
  formState.value = {}
  confirmLoading.value = false
  formRef.value.resetFields()
  visible.value = false
}
onMounted(async () => {
  await store.dispatch('getEmplGruop')
  await store.dispatch('getSkillGrade')
  await store.dispatch('getWorkType')
})
defineExpose({
  edit
})

</script>